<template>
  <el-dialog 
    title="商品导入" 
    :visible.sync="showFlag" 
    width="600px" 
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="import-container">
      <div class="upload-area">
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx,.xls"
          :disabled="upload.isUploading"
          :on-change="handleFileChange"
          :auto-upload="false"
          :file-list="fileList"
          drag
        
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip " slot="tip">
            <!-- <div class="el-upload__tip">
              <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的商品数据
            </div> -->
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
          </div>
        </el-upload>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
import { importGoods } from "@/api/mes/sales/saleOrder";

export default {
  name: "ImportGoods",
  props: {
    orderId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      showFlag: false,
      fileList: [],
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的商品数据
        updateSupport: false
      }
    };
  },
  methods: {
    // 文件选择处理
    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },
    // 提交上传文件
    submitFileForm() {
      if (this.fileList.length === 0) {
        this.$message.error("请选择要上传的文件");
        return;
      }
      
      this.upload.isUploading = true;
      const formData = new FormData();
      formData.append("file", this.fileList[0].raw);
      // formData.append("updateSupport", this.upload.updateSupport);
      if (this.orderId) {
        formData.append("orderId", this.orderId);
      }
      
      importGoods(formData).then(response => {
        this.upload.isUploading = false;
        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
        this.handleClose();
        this.$emit("onImported");
      }).catch(error => {
        this.upload.isUploading = false;
        this.$message.error("导入失败：" + (error.msg || "未知错误"));
      });
    },
    // 下载模板
    importTemplate() {
      this.$message.info("请联系管理员获取导入模板");
    },
    // 关闭对话框
    handleClose() {
      this.showFlag = false;
      this.fileList = [];
      this.upload.isUploading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
  .text-center{
    text-align: center;

  }
.import-container {
  .upload-area {
    margin: 20px 0;
    
    // 修复上传区域宽度问题
    ::v-deep .el-upload {
      width: 100%;
    }
    
    ::v-deep .el-upload-dragger {
      width: 100%;
      box-sizing: border-box;
    }
    
    // 确保提示文字与上传区域宽度一致
    ::v-deep .el-upload__tip {
      width: 100%;
      box-sizing: border-box;
      margin-top: 10px;
      text-align: left;
      display: flex;
      align-items: center;
      flex-direction: column;
      
      .el-upload__tip {
        margin-bottom: 5px;
      }
      
      span {
        display: block;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
